<template>
  <div>
    <van-nav-bar title="黑马优购" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="我是有底线的"
        @load="onLoadList"
      >
        <van-card
          v-for="(item,index) in goodslist"
          :key="index"
          :num="goodslist[index].goods_number"
          :price="goodslist[index].goods_price"
          :title="goodslist[index].goods_name"
          :thumb="goodslist[index].goods_small_logo"
          @click="toSomething(item.goods_id)"
        ></van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      goodslist: [],
      isLoading: false,
      queryInfo: {
        query: this.$route.query.cateName,
        cid: this.$route.query.id,
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      isUpLoading: false,
      upFinished: false,
      offset: 100,
      long: 0
    };
  },
  created() {
    this.getAddList();
    this.$store.commit("setIfShow", false);
    this.isGoods();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async getAddList() {
      const { data: res } = await this.$http.get("/goods/search", {
        params: this.queryInfo
      });
      if (res.meta.status !== 200) {
        this.$notify("获取数据失败");
      }
      this.total = res.message.total;
      const rows = res.message.goods;
      if (rows == null || rows.length === 0) {
        // 加载结束
        this.upFinished = true;
        return;
      }
      if (rows.length < this.queryInfo.pagesize) {
        // 最后一页不足10条的情况
        this.upFinished = true;
      }
      this.goodslist = this.goodslist.concat(rows);
    },
    // 是否有商品 没有弹窗提示
    async isGoods() {
      const { data: res } = await this.$http.get("/goods/search", {
        params: this.queryInfo
      });
      if (res.meta.status !== 200) {
        this.$notify("获取数据失败");
      } else {
        this.long = res.message.goods.length;
        if (this.long === 0) {
          this.$dialog
            .alert({
              message: "没有此商品"
            })
            .then(() => {
              this.$router.go(-1);
            });
        }
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    onLoadList() {
      setTimeout(() => {
        this.getAddList();
        this.queryInfo.pagenum++;
        this.isUpLoading = false;
        if (this.goodslist.length >= this.total) {
          this.upFinished = true;
        }
      }, 1000);
    },
    // 跳转到商品详情
    toSomething(id) {
      this.$store.commit("getgoodid", id);
      this.$router.push("/details");
    }
  },
  computed: {
    ...mapState(["inputValue"])
  }
};
</script>

<style lang='less' scoped>
.van-card__header {
  margin-top: 40px;
}
</style>
